<template>
<div class="user-info">
    <el-row :gutter="20">
        <el-col :md="6" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>个人信息</span>
                    </div>
                </template>
                <div class="info">
                   <div class="user-avatar" @click="uploadImage" style="cursor: pointer">
                       <input accept="image/*" type="file" style="display: none">
                       <el-avatar :size="100" :src="fullUrl(state.form.avatar)" />
                   </div>
                    <el-form
                        label-position="top"
                        :label-width="100"
                        :model="state.form"
                    >
                        <FormItem
                            label="昵称"
                            type="string"
                            v-model="state.form.nickname"
                            placeholder="请输入昵称"
                            prop="nickname"
                        />
                        <FormItem
                            label="签名"
                            type="textarea"
                            v-model="state.form.motto"
                            placeholder="请输入签名"
                            prop="motto"
                        />
                        <el-form-item class="flex_right">
                            <el-button type="primary" @click="onInfo">保存信息</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>更新密码</span>
                    </div>
                </template>
                <el-form
                    label-position="top"
                    :label-width="100"
                    :model="state.form_password"
                >
                    <FormItem
                        label="旧密码"
                        type="password"
                        v-model="state.form_password.oldPassword"
                        placeholder="请输入旧密码"
                        prop="old_password"
                    />
                    <FormItem
                        label="新密码"
                        type="password"
                        v-model="state.form_password.newPassword"
                        placeholder="请输入新密码"
                        prop="new_password"
                    />
                    <FormItem
                        label="确认密码"
                        type="password"
                        v-model="state.form_password.confirmPassword"
                        placeholder="请确认新密码"
                        prop="confirm_password"
                    />
                    <el-form-item class="flex_right">
                        <el-button type="primary" @click="onPassword">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :md="18" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>基本信息</span>
                    </div>
                </template>
                <span></span>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import FormItem from '/@/components/formItem/index.vue'
import {useUserInfo} from "/@/stores/userInfo";
import {fullUrl} from "/@/utils/common";
import { changePassword } from '/@/api/frontend/user/index'
import { save_info } from '/@/api/frontend/chat/user'
import {ElMessage} from "element-plus";
import {fileUpload} from "/@/api/common";
import {message} from "ant-design-vue";

const userInfo = useUserInfo()

const state: {
    form: any,
    form_password: any,
} = reactive({
    form: {
        avatar: userInfo.avatar,
        nickname: userInfo.nickname,
        motto: userInfo.motto,
    },
    form_password: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
    }
})

const onInfo = () => {
    // 不为空
    if (state.form.nickname == '') {
        ElMessage.warning('昵称不能为空')
        return
    }
    save_info(state.form).then(res => {
        if(res.code === 1) {
            ElMessage.success(res.msg)
        }
    })
}
const onPassword = () => {
    if (state.form_password.oldPassword == '') {
        ElMessage.warning('旧密码不能为空')
        return
    }
    if (state.form_password.newPassword == '') {
        ElMessage.warning('新密码不能为空')
        return
    }
    if (state.form_password.confirmPassword == '') {
        ElMessage.warning('确认密码不能为空')
        return
    }

    changePassword(state.form_password).then(res => {
        if(res.code === 1) {
            // 提示修改成功

        }
    })
}

// 上传图片
const uploadImage = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.multiple = true;
    input.onchange = handleFileUpload;
    input.click();
}
// handleFileUpload
const handleFileUpload = (e: any) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);
    fileUpload(formData).then(res => {
        if (res.code === 1) {
            state.form.avatar = res.data.file.url
        }
    })
}
</script>

<style scoped lang="scss">
.user-info {
    width: 100%;
    padding: 2px;
    .info {
        .user-avatar {
            text-align: center;
            margin-bottom: 20px;
        }
    }
    .box-card {
        margin-bottom: 20px;
    }
}
.flex_right {
    :deep(.el-form-item__content) {
        justify-content: flex-end;
    }
}
</style>
